<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识仓库 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== 基础样式重置 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    /* ===== CSS 变量定义 ===== */
    :root {
      --primary-color: #4a6bff;
      --primary-light: #eef2ff;
      --secondary-color: #ff6b6b;
      --accent-color: #00d2d3;
      --success-color: #10b981;
      --warning-color: #f59e0b;
      --danger-color: #ef4444;
      --text-primary: #1f2937;
      --text-secondary: #6b7280;
      --text-light: #9ca3af;
      --background-light: #f9fafb;
      --white: #ffffff;
      --border-color: #e5e7eb;
      --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
      --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07);
      --shadow-heavy: 0 10px 15px rgba(0, 0, 0, 0.1);
      --border-radius: 12px;
      --transition: all 0.3s ease;
    }

    body {
      background-color: var(--background-light);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
    }

    /* ===== 导航栏样式 ===== */
    .navbar {
      background: var(--white);
      box-shadow: var(--shadow-light);
      padding: 15px 0;
      z-index: 100;
      position: sticky;
      top: 0;
    }

    .navbar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-weight: 700;
      color: var(--primary-color);
    }

    .nav-brand i {
      margin-right: 10px;
      font-size: 26px;
    }

    .nav-buttons {
      display: flex;
      gap: 15px;
    }

    /* ===== 按钮样式 ===== */
    .btn {
      padding: 10px 20px;
      border-radius: var(--border-radius);
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
      font-size: 14px;
    }

    .btn-outline {
      border: 2px solid var(--primary-color);
      color: var(--primary-color);
      background: transparent;
    }

    .btn-primary {
      background: var(--primary-color);
      color: var(--white);
      box-shadow: var(--shadow-light);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    .btn-outline:hover {
      background: var(--primary-color);
      color: var(--white);
    }

    /* ===== 主布局 ===== */
    .main-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* ===== 页面标题区域 ===== */
    .page-header {
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .page-title {
      font-size: 32px;
      color: var(--text-primary);
      margin-bottom: 10px;
      font-weight: 700;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-secondary);
      font-size: 14px;
    }

    .breadcrumb-item:not(:last-child):after {
      content: "›";
      margin-left: 10px;
    }

    .breadcrumb-item.active {
      color: var(--primary-color);
      font-weight: 600;
    }

    /* ===== 卡片网格布局 ===== */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
    }

    .card {
      background: var(--white);
      border-radius: var(--border-radius);
      overflow: hidden;
      box-shadow: var(--shadow-light);
      border: 1px solid var(--border-color);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-heavy);
    }

    .card-image {
      height: 160px;
      background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 40px;
    }

    .card-content {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .card-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .card-description {
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 15px;
      font-size: 14px;
      flex-grow: 1;
    }

    .card-meta {
      display: flex;
      justify-content: space-between;
      margin-top: auto;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .card-count {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--border-color);
    }

    .progress-container {
      flex-grow: 1;
      margin-right: 15px;
    }

    .progress-bar {
      height: 6px;
      background: var(--border-color);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 5px;
    }

    .progress-fill {
      height: 100%;
      background: var(--success-color);
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    .progress-text {
      font-size: 12px;
      color: var(--text-light);
    }

    .card-btn {
      padding: 8px 15px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-weight: 600;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .card-btn:hover {
      background: #3a56e6;
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    /* ===== 分页样式 ===== */
    .pagination-container {
      margin: 40px 0 20px;
      text-align: center;
    }

    .page-info {
      margin-bottom: 15px;
      color: var(--text-secondary);
      font-size: 14px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }

    .page-link {
      padding: 10px 15px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      text-decoration: none;
      color: var(--text-primary);
      transition: var(--transition);
      font-size: 14px;
      min-width: 40px;
      text-align: center;
      display: inline-block;
    }

    .page-link:hover {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
    }

    .page-link.active {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
    }

    .page-link.disabled {
      color: var(--text-light);
      cursor: not-allowed;
      background: var(--background-light);
    }

    .page-ellipsis {
      padding: 10px 5px;
      color: var(--text-light);
    }

    .page-jump {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 15px;
      flex-wrap: wrap;
    }

    .page-input {
      width: 60px;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      text-align: center;
    }

    .jump-btn {
      padding: 8px 15px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: var(--transition);
    }

    .jump-btn:hover {
      background: #3a56e6;
    }

    /* ===== 页脚样式 ===== */
    footer {
      text-align: center;
      color: var(--text-secondary);
      padding: 30px 0;
      margin-top: 40px;
      border-top: 1px solid var(--border-color);
      background: var(--white);
    }

    footer p {
      margin-bottom: 15px;
    }

    /* ===== 加载动画 ===== */
    .loading-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid var(--primary-light);
      border-top: 4px solid var(--primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* ===== 空状态 ===== */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-light);
    }

    .empty-state i {
      font-size: 48px;
      margin-bottom: 20px;
    }

    .empty-state h3 {
      color: var(--text-secondary);
      margin-bottom: 10px;
    }

    /* ===== 响应式设计 ===== */
    @media (max-width: 768px) {
      .nav-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
      }

      .navbar .container {
        flex-direction: column;
        gap: 15px;
      }

      .cards-grid {
        grid-template-columns: 1fr;
      }

      .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .pagination {
        gap: 3px;
      }

      .page-link {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 35px;
      }
    }

    @media (max-width: 480px) {
      .main-container {
        padding: 15px;
      }

      .page-title {
        font-size: 28px;
      }

      .card-image {
        height: 120px;
        font-size: 32px;
      }
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
  <div class="container">
    <div class="nav-brand">
      <i class="fas fa-graduation-cap"></i> 渐进学习平台
    </div>
    <div class="nav-buttons">
      <span style="margin-right: 15px; color: var(--primary-color);">
        欢迎，<span id="username">学习者</span>
      </span>
      <a href="/" class="btn btn-outline">返回首页</a>
      <a href="#" class="btn btn-outline">退出</a>
    </div>
  </div>
</nav>

<!-- 主布局 -->
<div class="main-container">
  <!-- 页面标题区域 -->
  <div class="page-header">
    <div>
      <h1 class="page-title" id="pageTitle">知识分类</h1>
      <div class="breadcrumb" id="breadcrumb">
        <div class="breadcrumb-item active">知识分类</div>
      </div>
    </div>
    <div id="backButtonContainer"></div>
  </div>

  <!-- 卡片网格容器 -->
  <div class="cards-grid" id="cardsContainer">
    <!-- 卡片将通过JavaScript动态加载 -->
  </div>

  <!-- 分页导航 -->
  <div class="pagination-container" id="paginationContainer">
    <!-- 分页将通过JavaScript动态生成 -->
  </div>
</div>

<!-- 页脚 -->
<footer>
  <p>&copy; 2024 渐进学习平台 - 让学习像健身一样科学有效</p>
  <p>联系我们: support@knowledge-gym.com</p>
</footer>

<script>
  // 全局状态管理
  const appState = {
    currentLevel: 'category', // category, module, package, point
    currentCategoryId: null,
    currentModuleId: null,
    currentPackageId: null,
    currentPage: 1,
    pageSize: 12,
    totalItems: 0,
    totalPages: 0
  };

  // 模拟数据 - 在实际应用中这些数据应该从后端API获取
  const mockData = {
    categories: [
      { id: 1, name: 'Java编程', description: 'Java语言基础与高级特性', moduleCount: 4, icon: 'fab fa-java' },
      { id: 2, name: 'Spring框架', description: 'Spring全家桶技术栈', moduleCount: 5, icon: 'fas fa-leaf' },
      { id: 3, name: '数据库', description: '关系型与非关系型数据库', moduleCount: 3, icon: 'fas fa-database' },
      { id: 4, name: '前端技术', description: 'HTML, CSS, JavaScript及相关框架', moduleCount: 4, icon: 'fas fa-code' },
      { id: 5, name: 'DevOps', description: '开发运维一体化实践', moduleCount: 3, icon: 'fas fa-server' },
      { id: 6, name: '数据结构与算法', description: '计算机科学核心基础', moduleCount: 2, icon: 'fas fa-project-diagram' },
      { id: 7, name: '设计模式', description: '软件设计最佳实践', moduleCount: 2, icon: 'fas fa-cubes' }
    ],
    modules: {
      1: [
        { id: 1, name: 'Java核心基础', description: '数据类型、控制结构、面向对象', packageCount: 5, categoryId: 1 },
        { id: 2, name: '集合框架', description: 'List、Set、Map等集合类', packageCount: 4, categoryId: 1 },
        { id: 3, name: '多线程编程', description: '线程创建、同步、线程池', packageCount: 3, categoryId: 1 },
        { id: 4, name: 'IO与NIO', description: '文件操作与网络编程', packageCount: 3, categoryId: 1 }
      ],
      2: [
        { id: 5, name: 'Spring Core', description: 'IoC容器与依赖注入', packageCount: 4, categoryId: 2 },
        { id: 6, name: 'Spring MVC', description: 'Web应用开发框架', packageCount: 3, categoryId: 2 },
        { id: 7, name: 'Spring Boot', description: '快速应用开发', packageCount: 4, categoryId: 2 },
        { id: 8, name: 'Spring Security', description: '应用安全框架', packageCount: 3, categoryId: 2 },
        { id: 9, name: 'Spring Data', description: '数据访问技术', packageCount: 3, categoryId: 2 }
      ]
    },
    packages: {
      1: [
        { id: 1, name: 'Java数据类型与变量', description: '基本数据类型、变量声明与使用', pointCount: 8, progress: 75, moduleId: 1 },
        { id: 2, name: '控制结构与循环', description: '条件语句、循环结构', pointCount: 6, progress: 60, moduleId: 1 },
        { id: 3, name: '面向对象基础', description: '类、对象、封装、继承、多态', pointCount: 10, progress: 40, moduleId: 1 },
        { id: 4, name: '异常处理', description: '异常类型、处理机制', pointCount: 5, progress: 20, moduleId: 1 },
        { id: 5, name: '常用API', description: '字符串、日期、数学等常用类', pointCount: 7, progress: 0, moduleId: 1 }
      ],
      2: [
        { id: 6, name: 'List集合详解', description: 'ArrayList、LinkedList等', pointCount: 6, progress: 50, moduleId: 2 },
        { id: 7, name: 'Set集合详解', description: 'HashSet、TreeSet等', pointCount: 5, progress: 30, moduleId: 2 },
        { id: 8, name: 'Map集合详解', description: 'HashMap、TreeMap等', pointCount: 7, progress: 10, moduleId: 2 },
        { id: 9, name: '集合工具类', description: 'Collections、Arrays等', pointCount: 4, progress: 0, moduleId: 2 }
      ]
    },
    points: {
      1: [
        { id: 1, name: '基本数据类型', description: 'int、double、boolean等基本类型', duration: 15, experience: 50, difficulty: '初级' },
        { id: 2, name: '引用数据类型', description: 'String、数组等引用类型', duration: 20, experience: 70, difficulty: '初级' },
        { id: 3, name: '变量声明与初始化', description: '变量定义、作用域、生命周期', duration: 25, experience: 80, difficulty: '初级' },
        { id: 4, name: '数据类型转换', description: '自动类型转换、强制类型转换', duration: 20, experience: 70, difficulty: '初级' },
        { id: 5, name: '常量与final关键字', description: '常量的定义与使用', duration: 15, experience: 50, difficulty: '初级' }
      ]
    }
  };

  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', function() {
    loadCategories();

    // 为快速跳转输入框添加回车键支持
    document.addEventListener('keypress', function(event) {
      if (event.key === 'Enter' && event.target.id === 'jumpPage') {
        jumpToPage();
      }
    });
  });

  // 加载分类数据
  function loadCategories(page = 1) {
    appState.currentLevel = 'category';
    appState.currentPage = page;

    // 在实际应用中，这里应该调用API获取数据
    // 模拟API调用延迟
    showLoading();

    setTimeout(() => {
      const categories = mockData.categories;
      appState.totalItems = categories.length;
      appState.totalPages = Math.ceil(categories.length / appState.pageSize);

      updateBreadcrumb([]);
      updatePageTitle('知识分类');
      updateBackButton();
      renderCards(categories, 'category');
      renderPagination();

      hideLoading();
    }, 500);
  }

  // 加载模块数据
  function loadModules(categoryId, page = 1) {
    appState.currentLevel = 'module';
    appState.currentCategoryId = categoryId;
    appState.currentPage = page;

    // 在实际应用中，这里应该调用API获取数据
    showLoading();

    setTimeout(() => {
      const modules = mockData.modules[categoryId] || [];
      appState.totalItems = modules.length;
      appState.totalPages = Math.ceil(modules.length / appState.pageSize);

      const category = mockData.categories.find(c => c.id === categoryId);
      updateBreadcrumb([
        { name: '知识分类', action: () => loadCategories() }
      ], category.name);

      updatePageTitle(category.name);
      updateBackButton(() => loadCategories());
      renderCards(modules, 'module');
      renderPagination();

      hideLoading();
    }, 500);
  }

  // 加载知识包数据
  function loadPackages(moduleId, page = 1) {
    appState.currentLevel = 'package';
    appState.currentModuleId = moduleId;
    appState.currentPage = page;

    // 在实际应用中，这里应该调用API获取数据
    showLoading();

    setTimeout(() => {
      const packages = mockData.packages[moduleId] || [];
      appState.totalItems = packages.length;
      appState.totalPages = Math.ceil(packages.length / appState.pageSize);

      const module = mockData.modules[appState.currentCategoryId].find(m => m.id === moduleId);
      const category = mockData.categories.find(c => c.id === appState.currentCategoryId);

      updateBreadcrumb([
        { name: '知识分类', action: () => loadCategories() },
        { name: category.name, action: () => loadModules(appState.currentCategoryId) }
      ], module.name);

      updatePageTitle(module.name);
      updateBackButton(() => loadModules(appState.currentCategoryId));
      renderCards(packages, 'package');
      renderPagination();

      hideLoading();
    }, 500);
  }

  // 加载知识点数据
  function loadPoints(packageId, page = 1) {
    appState.currentLevel = 'point';
    appState.currentPackageId = packageId;
    appState.currentPage = page;

    // 在实际应用中，这里应该调用API获取数据
    showLoading();

    setTimeout(() => {
      const points = mockData.points[packageId] || [];
      appState.totalItems = points.length;
      appState.totalPages = Math.ceil(points.length / appState.pageSize);

      const pkg = mockData.packages[appState.currentModuleId].find(p => p.id === packageId);
      const module = mockData.modules[appState.currentCategoryId].find(m => m.id === appState.currentModuleId);
      const category = mockData.categories.find(c => c.id === appState.currentCategoryId);

      updateBreadcrumb([
        { name: '知识分类', action: () => loadCategories() },
        { name: category.name, action: () => loadModules(appState.currentCategoryId) },
        { name: module.name, action: () => loadPackages(appState.currentModuleId) }
      ], pkg.name);

      updatePageTitle(pkg.name);
      updateBackButton(() => loadPackages(appState.currentModuleId));
      renderCards(points, 'point');
      renderPagination();

      hideLoading();
    }, 500);
  }

  // 渲染卡片
  function renderCards(items, type) {
    const container = document.getElementById('cardsContainer');
    container.innerHTML = '';

    if (items.length === 0) {
      container.innerHTML = `
        <div class="empty-state" style="grid-column: 1 / -1;">
          <i class="fas fa-inbox"></i>
          <h3>暂无数据</h3>
          <p>当前分类下没有找到相关内容</p>
        </div>
      `;
      return;
    }

    // 计算分页后的数据
    const startIndex = (appState.currentPage - 1) * appState.pageSize;
    const endIndex = Math.min(startIndex + appState.pageSize, items.length);
    const pagedItems = items.slice(startIndex, endIndex);

    pagedItems.forEach(item => {
      const card = createCard(item, type);
      container.appendChild(card);
    });
  }

  // 创建卡片
  function createCard(item, type) {
    const card = document.createElement('div');
    card.className = 'card';

    if (type === 'category') {
      card.innerHTML = `
        <div class="card-image" style="background: linear-gradient(135deg, #4a6bff, #00d2d3);">
          <i class="${item.icon}"></i>
        </div>
        <div class="card-content">
          <h3 class="card-title">${item.name}</h3>
          <p class="card-description">${item.description}</p>
          <div class="card-meta">
            <div class="card-count">
              <i class="fas fa-cubes"></i>
              <span>${item.moduleCount} 个模块</span>
            </div>
          </div>
          <div class="card-footer">
            <button class="card-btn" onclick="loadModules(${item.id})">
              <i class="fas fa-arrow-right"></i> 查看模块
            </button>
          </div>
        </div>
      `;
    } else if (type === 'module') {
      card.innerHTML = `
        <div class="card-image" style="background: linear-gradient(135deg, #ff6b6b, #ffa726);">
          <i class="fas fa-cube"></i>
        </div>
        <div class="card-content">
          <h3 class="card-title">${item.name}</h3>
          <p class="card-description">${item.description}</p>
          <div class="card-meta">
            <div class="card-count">
              <i class="fas fa-box"></i>
              <span>${item.packageCount} 个知识包</span>
            </div>
          </div>
          <div class="card-footer">
            <button class="card-btn" onclick="loadPackages(${item.id})">
              <i class="fas fa-arrow-right"></i> 查看知识包
            </button>
          </div>
        </div>
      `;
    } else if (type === 'package') {
      card.innerHTML = `
        <div class="card-image" style="background: linear-gradient(135deg, #00d2d3, #4ecdc4);">
          <i class="fas fa-box-open"></i>
        </div>
        <div class="card-content">
          <h3 class="card-title">${item.name}</h3>
          <p class="card-description">${item.description}</p>
          <div class="card-meta">
            <div class="card-count">
              <i class="fas fa-book"></i>
              <span>${item.pointCount} 个知识点</span>
            </div>
          </div>
          <div class="card-footer">
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" style="width: ${item.progress}%"></div>
              </div>
              <div class="progress-text">已学习 ${item.progress}%</div>
            </div>
            <button class="card-btn" onclick="loadPoints(${item.id})">
              <i class="fas fa-arrow-right"></i> 查看知识点
            </button>
          </div>
        </div>
      `;
    } else if (type === 'point') {
      const difficultyClass = getDifficultyClass(item.difficulty);

      card.innerHTML = `
        <div class="card-image" style="background: linear-gradient(135deg, #a855f7, #8b5cf6);">
          <i class="fas fa-book"></i>
        </div>
        <div class="card-content">
          <h3 class="card-title">${item.name}</h3>
          <p class="card-description">${item.description}</p>
          <div class="card-meta">
            <div class="card-count">
              <i class="far fa-clock"></i>
              <span>${item.duration} 分钟</span>
            </div>
            <div class="card-count">
              <i class="fas fa-star"></i>
              <span>${item.experience} 经验</span>
            </div>
            <div class="card-count">
              <span class="difficulty-badge ${difficultyClass}">${item.difficulty}</span>
            </div>
          </div>
          <div class="card-footer">
            <button class="card-btn" onclick="startTraining(${item.id})">
              <i class="fas fa-play-circle"></i> 开始学习
            </button>
          </div>
        </div>
      `;
    }

    return card;
  }

  // 渲染分页
  function renderPagination() {
    const container = document.getElementById('paginationContainer');

    if (appState.totalPages <= 1) {
      container.innerHTML = '';
      return;
    }

    container.innerHTML = `
      <div class="page-info">
        共 ${appState.totalItems} 个${getLevelName(appState.currentLevel)}，第 ${appState.currentPage} 页，共 ${appState.totalPages} 页
      </div>
      <div class="pagination" id="pagination">
        ${renderPaginationLinks()}
      </div>
      <div class="page-jump">
        <span>跳转到</span>
        <input type="number" class="page-input" id="jumpPage" min="1" max="${appState.totalPages}" placeholder="页码">
        <span>页</span>
        <button class="jump-btn" onclick="jumpToPage()">确定</button>
      </div>
    `;
  }

  // 渲染分页链接
  function renderPaginationLinks() {
    let links = '';

    // 上一页按钮
    if (appState.currentPage > 1) {
      links += `<a href="#" class="page-link" onclick="goToPage(${appState.currentPage - 1})">‹ 上一页</a>`;
    } else {
      links += `<a href="#" class="page-link disabled">‹ 上一页</a>`;
    }

    // 页码链接
    const startPage = Math.max(1, appState.currentPage - 2);
    const endPage = Math.min(appState.totalPages, startPage + 4);

    for (let i = startPage; i <= endPage; i++) {
      if (i === appState.currentPage) {
        links += `<a href="#" class="page-link active">${i}</a>`;
      } else {
        links += `<a href="#" class="page-link" onclick="goToPage(${i})">${i}</a>`;
      }
    }

    // 下一页按钮
    if (appState.currentPage < appState.totalPages) {
      links += `<a href="#" class="page-link" onclick="goToPage(${appState.currentPage + 1})">下一页 ›</a>`;
    } else {
      links += `<a href="#" class="page-link disabled">下一页 ›</a>`;
    }

    return links;
  }

  // 跳转到指定页面
  function goToPage(page) {
    if (page < 1 || page > appState.totalPages) return;

    switch (appState.currentLevel) {
      case 'category':
        loadCategories(page);
        break;
      case 'module':
        loadModules(appState.currentCategoryId, page);
        break;
      case 'package':
        loadPackages(appState.currentModuleId, page);
        break;
      case 'point':
        loadPoints(appState.currentPackageId, page);
        break;
    }
  }

  // 快速跳转页面
  function jumpToPage() {
    const pageInput = document.getElementById('jumpPage');
    const page = parseInt(pageInput.value);

    if (page && page >= 1 && page <= appState.totalPages) {
      goToPage(page);
    } else {
      alert(`请输入有效的页码（1-${appState.totalPages}）`);
      pageInput.focus();
    }
  }

  // 更新面包屑导航
  function updateBreadcrumb(items, current) {
    const breadcrumb = document.getElementById('breadcrumb');
    let html = '';

    items.forEach(item => {
      html += `<div class="breadcrumb-item" onclick="${item.action.toString().replace(/'/g, '&apos;')}">${item.name}</div>`;
    });

    html += `<div class="breadcrumb-item active">${current}</div>`;
    breadcrumb.innerHTML = html;
  }

  // 更新页面标题
  function updatePageTitle(title) {
    document.getElementById('pageTitle').textContent = title;
  }

  // 更新返回按钮
  function updateBackButton(backAction) {
    const container = document.getElementById('backButtonContainer');

    if (backAction) {
      container.innerHTML = `<button class="btn btn-outline" onclick="${backAction.toString().replace(/'/g, '&apos;')}"><i class="fas fa-arrow-left"></i> 返回上一级</button>`;
    } else {
      container.innerHTML = '';
    }
  }

  // 显示加载状态
  function showLoading() {
    const container = document.getElementById('cardsContainer');
    container.innerHTML = `
      <div class="loading-container" style="grid-column: 1 / -1;">
        <div class="loading-spinner"></div>
      </div>
    `;
  }

  // 隐藏加载状态
  function hideLoading() {
    // 加载状态会在渲染卡片时被替换
  }

  // 获取难度CSS类名
  function getDifficultyClass(difficulty) {
    const difficultyMap = {
      '初级': 'difficulty-beginner',
      '中级': 'difficulty-intermediate',
      '高级': 'difficulty-advanced'
    };
    return difficultyMap[difficulty] || 'difficulty-beginner';
  }

  // 获取层级名称
  function getLevelName(level) {
    const levelMap = {
      'category': '分类',
      'module': '模块',
      'package': '知识包',
      'point': '知识点'
    };
    return levelMap[level] || '项目';
  }

  // 开始学习知识点
  function startTraining(pointId) {
    console.log('开始学习知识点:', pointId);
    // 在实际应用中，这里会跳转到学习页面
    alert('开始学习知识点 ID: ' + pointId);
  }
</script>
</body>
</html>